<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Navigational Features</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  </head>
  <body>
    <h2>Navigational Features</h2>
    <p>
      To make navigation around the web site easy, I added a navigation bar to the left side of the home page and a different navigation bar for the "My Design" page that you are browsing now.
    </p>
    <p>
      The Home page uses CSS to render a consistent navigation bar while browsing the home page (including "Longhorn Home") and the "Assignments" page. The navigation bar can be seen in green in the screen capture below.
    </p>
    <p>
      <img src="../images/index_css.jpg" alt="A screen capture of the home page with CSS styling."  style="border: solid" />
    </p>
    <p>
      For the pages under "My Design", I used a frameset to divide the navigation bar and content.  Frames were chosen to satisfy the homework requirements, and they worked well to seperate the pages on usability.  In this navigation bar, I only included links to the pages on usability features. I added a single link back to the "Home" page to return the user to rest of the site.  The screen capture below shows the layout of the "My Design" page.
    </p>
    <p>
      <img src="../images/usability.jpg" alt="A screen capture of the My Design page using a frameset."  style="border: solid" />
    </p>
    <p>
      The only section of the web site without a navigation bar is the "Resume."  I felt that adding extra page content would distract from the resume and make it difficult to print a hard copy.  To prevent a dead end browsing path, however, I added a "Back to Home" link after the resume content.
    </p>
    <p>
      <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10"
             alt="Valid XHTML 1.0 Strict" height="31" width="88"/>
      </a>
    </p>
  </body>
</html>
